<template>

    <div class="fixed-center-container">
        <el-card>

            <div class="center-box bg-white rounded p-4">
                <h4 class="text-center">手机验证码登录</h4>
                <div class="row text-center">
                    <router-link to="/zmLogin"> <a href="#" class="yzmTitle">账号密码登录 <i class="el-icon-right"></i></a>
                    </router-link>
                </div>
                <div class="row mt-4">
                    <div class="col-12">
                        <el-input placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone" maxlength="11" v-model="Phone"
                            class="userInput" @input="handleInput">
                        </el-input>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-8">
                        <el-input placeholder="验证码" prefix-icon="el-icon-message" v-model="Phone" class="userInput">
                        </el-input>
                    </div>
                    <div class="col-4" style="margin: auto;">
                        <!-- <el-button type="primary">获取验证码</el-button> -->
                        <el-button type="primary" :disabled="counting" @click="startCountdown">{{ counting ?
                            `${countdown} 秒` : '获取验证码' }}</el-button>
                    </div>
                </div>
                <div class="row text-center mt-4">
                    <div class="form-group ">
                        <el-button type="primary" style="width: 360px;">登录</el-button>
                    </div>
                </div>
                <div class="row FLexbetween">
                    <div class="col-6">
                        <router-link to="/register"><a href="#" class="bottRowtitle">注册新账号</a></router-link>
                    </div>
                    <div class="col-6" style="text-align: end;">
                        <router-link to="/retrievepassword"><a href="#" class="bottRowtitle">忘记密码?</a></router-link>
                    </div>
                </div>

            </div>
        </el-card>

    </div>
</template>

<script>
export default {
    name: 'ContactForm',
    data() {
        return {
            Phone: "",
            counting: false,
            countdown: 60
        }
    },
    methods: {
        handleInput() {
            this.Phone = this.Phone.replace(/\D/g, ''); // 只保留数字
        },
        startCountdown() {
            if (this.counting) return;

            this.counting = true;
            let timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    this.counting = false;
                    this.countdown = 60;
                    clearInterval(timer);
                }
            }, 1000);
        }
    }
}
</script>
<style scoped>
.fixed-center-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 1000; */
    /* 可根据需要调整z-index值，确保盒子位于其他元素之上 */
}

.center-box {
    background-color: #fff;
    border-radius: 0.25rem;
    max-width: 400px;
    /* 按照需求设置最大宽度，比如：max-width: 600px; */
    width: 100%;
    margin: auto;
}

/* 可选，针对移动设备的小屏幕，可以根据需求调整盒子在小屏幕上的显示方式 */
@media (max-width: 767px) {
    .center-box {
        max-width: 300px;

        /* width: 80%; */
        /* 或者其他适合移动设备的宽度 */
    }
}

::v-deep .el-input--prefix .el-input__inner {
    width: 360px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #CECFD3;
}

::v-deep .el-input__icon {
    line-height: 50px;
    font-size: 16px;
}

::v-deep .el-button--primary {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2468F2;
}

@media (max-width: 767px) {
    ::v-deep .el-button--primary {
        width: 100px;
        font-size: 12px;
        ;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.yzmTitle {
    margin: 0 auto;
    color: #2468F2;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
}

.yzmTitle {
    margin: 0 auto;
    color: #2468F2;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
}

.bottRowtitle {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
}
</style>